<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
				border: 0;
				text-decoration: none;
				list-style-type: none;
			}
			#divout{
				display: flex;
				align-items: center;
				flex-flow: column;
			}
			#header{
				display: flex;
				width: 1500px;
				height: 70px;
				padding-top: 10px;
				/* margin: 0 20px;	 */
				/* background: url(imgs/logodesign.png) no-repeat  ;
				background-size: 224px 64px; */
				justify-content: center;
				
				
				
				
			}
			/* #p1{
				width: 100px;
				float: left;
				font-family: "arial rounded mt bold";
				font-size: 30px;
			} */
			#nav{
				width: 1500px;
				height: 50px;
				display: flex;
				justify-content: center;
				
			}
			.ulnav{
				list-style: none;
				margin: 0 50px;
				/* text-align: center; */
				
				
				
			}
			.linav{
				float: right; 
				width: 150px;
				font-size: 18px;
				color: black;
				font-weight: bold;
				text-align: center;
				line-height: 45px;
				
			}
			 .linav a{
				color: black;
				text-decoration: none;
				
			}
			.linav:hover{
				background-color: rgba(0,0,0,0.3);
				
			}
			.caidanul{
				list-style: none;
				display: none;
				position: relative;
				
			}
			.caidanli{
				font-size: 14px;
				color: white;
				
			}
			.caidanli:hover{
				background-color:black;
				
			}
			.linav:hover .caidanul{
				display: block;
				z-index: 7;
			} 
			#container{
				width: 1500px;
				margin: 0 auto;
				position: relative;
				display: flex;
				align-content: center;
				justify-content: center;
				
			}
			.lunbo{
				width: 1500px;
				height: 500px;
				/* margin-left: 180px; */
				background: no-repeat url(images/ad1.png) 0 0;
				background-size: 1500px 500px;
				animation:lunbo 8s linear infinite;
				position: relative;
				
			}
			.lunbo ul{
				padding-left: 0;
				padding-top: 500px;
				
				height: 30px;
				width: 92px;				
				margin: auto;
				text-align: center;
				
				
			}
			.lunbo ul li{
				float: left;
				width: 20px;
				height: 20px;
				margin: 5px 3px 5px 0 ;
				font-size: 14px;
				line-height: 20px;
				text-align: center;
				color: white;
				border-radius: 20px;
				background-color:#CCCCCC ;
				
				
				
			}
			.lunbo ul li:hover{
				background-color:black;									
			}
			.lunbo ul li:hover div{
				width: 1500px;
				height: 500px;
				
				background: no-repeat 0 0;
				background-size: 1500px 500px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: aqua;
			}
			.lunbo ul li.lunbo1:hover div{
				background-image: url(imgs/car1.jpg ) ;
				
			}
			.lunbo ul li.lunbo2:hover div{
				background-image: url(imgs/car2.jpg );
			}
			.lunbo ul li.lunbo3:hover div{
				background-image: url(imgs/car3.jpg );
			}
			.lunbo ul li.lunbo4:hover div{
				background-image: url(imgs/car4.jpg );
			}
			#content{
				display: flex;
				width: 1500px;
				height: 800px;
				margin: 50px 0;
				
				
			}
			main{
				width: 1200px;
				display: flex;
				
				/* justify-content: flex-start; */
				/* align-items: center; */ */
				background-color: antiquewhite;
				/* justify-content: space-around; */
				flex-flow: row wrap;
				
			}
				aside{								
				display: flex;
				width: 300px;
				justify-content: center;
				align-items: center;
				flex-flow: column wrap;
				
			}
			.dianji{
				font-size: 25px;
				color: black;
			}
			
			#smallpic{
				border-radius: 5px;
				cursor: pointer;
				transition: opacity 0.3s;
			}
			#smallpic:hover{
				opacity: 0.7;
			}
			#picpop{
				width: 100%;
				height: 100%;
				background-color: rgba(30,30,30,0.9);
				position: absolute;
				left: 0;
				top: 0;
				padding-top: 100px;
				display: none;
			}
			.close{
				color: white;
				font-size: 40px;
				font-weight: bold;
				position: absolute;
				top: 10px;
				right: 30px;
			}
			.close:hover{
				color: #ccc;
				cursor: block;
				
			}
			.pop-content{
				margin: auto;
				width: 60%;				
				display: block;
				
			}
			#caption{
				margin: auto;
				width: 80%;
				color: white;
				display: block;
				text-align: center;
				padding: 10px;
				height: 150px;
			}
			.pop-content,#caption{
				animation: zoom 0.5s;
			}
			.t1{
				width: 1500px;
				height: 20px;
				display: flex;
				flex-flow: row;
				margin-top: 20px;
				
			}
			.pr{
				width: 1500px;
				margin-top:20px ;
			}
			.hdtitle1{
				margin-top: 60px;
			}
			.hdtitle, .hdtitle1{
				width: 1500px;
				display: flex;
				justify-content: space-between;
				height: 40px;
				border-bottom:2px solid #000
			}
			.hdtitle h2 , .hdtitle1 h2{
				line-height: 40px;
			}
			.hdtitle p a, .hdtitle1 p a{
				font-size: 14px;
				color: #ccc;
				line-height: 40px;
			}
			.pr ul{
				width: 100%;
				margin-top:12px ;
				display: flex;
				justify-content: space-between;
				padding-left: 0;
			}
			.pr ul li{
				width: 296px;
				height: 314px;
				position: relative;
				overflow: hidden;
			}
			/* .hd2{
				width: 430px;
				height: 430px;
				margin-top: 10px;
				float: left;
				position: relative;
				transition: all 0.3s;
				overflow: hidden;
				
			} */
			.pr2{
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				/* transition: all 0.3s;
				overflow: hidden; */
			}
			/* .hd2:hover{
				box-shadow: 0 0 15px #ccc;
				transform: scale(1.05,1.05);
			} */
			.pr2 img{
				width: 296px;
				height: 314px;
			}
			.pr1{
				width: 140px;
				height: 140px;
				position: absolute;
				left: -70px;
				top: -70px;
				background-color: #9b0d5f;
				transform: rotate(45deg);
				z-index: 1;
			}
			.pr ul h3{
				position: absolute;
				top: 12px;
				left: 12px;
				z-index: 2;
				font-size: 16px;
				color: white;
			}
			.pr3{
				position: absolute;
				bottom: 10px;
				left: 13px;
				width: 270px;
				height: 30px;
				font-size: 14px;
				line-height: 30px;
				text-align: center;
				color: white;
				background-color: black;
			}
			.pr11{
				background-color: darkgray;
			}
			.pr12{
				background-color: darkgoldenrod;
			}
			.pr13{
				background-color: burlywood;
			}
			#space{
				height: 50px;
			}
			#news{
				width: 1500px;
				height: 600px;
				display: flex;
			}
			#space2{
				height: 15px;
			}
			#pi1{
				display: flex;
				background-color: red;
				width: 300px;
				height: 200px;
				margin-bottom: 10px;
			}
			
			#pi2{
				display: flex;
				background-color: blue;
				width: 300px;
				height: 200px;
				margin-bottom: 10px;
			}
			#pi3{
				display: flex;
				background-color: blue;
				width: 300px;
				height: 200px;
				margin-bottom: 10px;
			
			}
			#wen1{
				
				width:1200px;
				height: 200px;
				margin-bottom: 10px;
				
			}
			
			#wen2{
				
				width:1200px;
				height: 200px;
				margin-bottom: 10px;
			}
			#wen3{
				
				width:1200px;
				height: 200px;
			}
			.nw{
				color: black;
			}
			.hui{
				color: darkgray;
			}
			#space3{
				width: 1500px;
				height: 75px;
			}
			#footer{
				width: 1500px;
				display: flex;
				border-top: 2px solid black;
				padding: 15px;				
				justify-content: space-around;
				height: 100px;
			}
			#space4{
				width: 1500px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				/* border-bottom: 2px solid black; */
				
			}
			.zh{
				color: black;
			}
			
			
			
			
			
			@keyframes zoom{
				from{transform: scale(0);}
				to{transform: scale(1);}
			}
			
				
			@keyframes lunbo{
				0%{
					background: url(imgs/car1.jpg) no-repeat top left;
					background-size: 1500px 500px;
				}
				25%{
					background: url(imgs/car2.jpg) no-repeat top left;
					background-size: 1500px 500px;
				}
				50%{
					background: url(imgs/car3.jpg) no-repeat top left;
					background-size: 1500px 500px;
				}
				75%{
					background: url(imgs/car4.jpg) no-repeat top left;
					background-size: 1500px 500px;
				}
				100%{
					background: url(imgs/car1.jpg) no-repeat top left;
					background-size: 1500px 500px;
				}
			}
			
			
			
				
				
			
			
			
		</style>
	</head>
	<body>
		<div id="divout">
		<div id="header">
		<img src="imgs/logodesign.png" width="224"height="64" >
		</div>
		<div  id="nav">
			<ul class="ulnav">
				<li class="linav"><a href="#">PERFORMANCE</a></li>
				<li class="linav"><a href="#">PRICE</a></li>			
				<li class="linav"><a href="#">NEWS</a></li>
				<li class="linav"><a href="#">TYPE</a>
				<ul class="caidanul">
					<li class="caidanli">911</li>
					<li class="caidanli">BENZ AMG G63</li>
					<li class="caidanli">AUDI RS6</li>
					<li class="caidanli">NISSAN GTR R36</li>
					<li class="caidanli">BMW M3</li>
					<li class="caidanli">HONDA NSX</li>
				</ul>						
				</li>
				
				<li class="linav"><a href="#">BRAND</a>
				<ul class="caidanul">
					<li class="caidanli">NISSAN</li>						
					<li class="caidanli">TOYOTA</li>
					<li class="caidanli">BMW</li>
					<li class="caidanli">HONDA</li>
				</ul>						
				</li>										
			</ul>			
		</div>						
		<div id="container">
			<div class="lunbo">
				<ul>
					<li class="lunbo1">
						<span></span>
						<div></div>
					</li>
					<li class="lunbo2">
						<span></span>
						<div></div>
					</li>
					<li class="lunbo3">
						<span></span>
						<div></div>
					</li>
					<li class="lunbo4">
						<span></span>
						<div></div>
					</li>
				</ul>
		
		</div>
		</div>
		<div class="hdtitle1">
			<h2>&nbsp TYEPE</h2>
			<p><a href="#">MORE &nbsp</a></p>
		</div>
		<div id="content">
			<main>
				<img id="smallpic" src="imgs/benz.jpg" alt="BENZ S400" width="540" height="400" onclick="showpic(this)">
								<img id="smallpic" src="imgs/370z.jpg" alt="NISSAN 370Z" width="540" height="400" onclick="showpic(this)">
								<img id="smallpic" src="imgs/ariya.jpg" alt="NISSAN ARIYA"width="540" height="400" onclick="showpic(this)">
								<img id="smallpic" src="imgs/porsche-zoom2.webp" alt="PORSCHE 911 TURBOS"width="540" height="400" onclick="showpic(this)">
												<div id="picpop">									
													<span class="close" onclick="closepic()">&times;</span>
													<img class="pop-content" id="bigimg">
													<div id="caption">										
													</div>
													</div>
			</main>
			<aside>
				<img src="imgs/tub.png" >
				<a class="dianji" href="#"><p >点击探索更多</p></a>
			
			
			</aside>
			
			
		</div>
		
			<section class="pr">
				<div class="hdtitle">
					<h2>&nbsp PEFORMANCE</h2>
					<p><a href="#">ACCELERATION &nbsp</a></p>
				</div>
				<ul>
					<li>
						<div class="pr1"></div>
						<h3>5.3s</h3>
						<div class="pr2">
							<a href="#">
								<img src="imgs/r34.jpg" alt="">
							</a>
						</div>
						<div class="pr3">
							<a href="#">
								NISSAN R34
							</a>
						</div>
					</li>
					<li>
						<div class="pr1 pr11"></div>
						<h3>6.1s</h3>
						<div class="pr2">
							<a href="#">
								<img src="imgs/r32.jpg" alt="">
							</a>
						</div>
						<div class="pr3">
							<a href="#">
								NISSAN R32
							</a>
						</div>
					</li>
					<li>
						<div class="pr1 pr12"></div>
						<h3>3.4s</h3>
						<div class="pr2">
							<a href="#">
								<img src="imgs/c63s.jpg" alt="">
							</a>
						</div>
						<div class="pr3">
							<a href="#">
								BENZ C63S
							</a>
						</div>
					</li>
					<li>
						<div class="pr1 pr13"></div>
						<h3>3.2s</h3>
						<div class="pr2">
							<a href="#">
								<img src="imgs/gt3.jpg" alt="">
							</a>
						</div>
						<div class="pr3">
							<a href="#">
								PORSCHE 991.2 GT3
							</a>
						</div>
					</li>
				</ul>
			</section>
          <!-- <div id="news"> -->
		  <div id="space"></div>
			  <div class="hdtitle">
			  	<h2>&nbsp NEWS</h2>
			  	<p><a href="#">ABOUT &nbsp</a></p>
			 </div>
			 <div id="space2"></div>
			 <div id="news">
				  <div id="pic1">
					  <div id="pi1">
						  <img src="imgs/pi1.jpg" width="300" height="200">
					  </div>
					  <div id="pi2">
						  <img src="imgs/pi2.jpg" width="300" height="200">
					  </div>
					  <div id="pi3">
					  	<img src="imgs/pi3.jpg" width="300" height="200">
					  </div>
				  </div>
				 <div id="wenz">
					 <div id="wen1">
						<a class="nw" href="#"><h3>
							&nbsp;包括ARIYA艾睿雅在内日产多款电驱化车型获评欧洲新车安全评鉴协会五星安全评级
						 
						 </h3></a>  <br>
						 <br>
						 
						 <p class="hui">&nbsp;2022-11-24</p><br>
						 <br>
						 <br>
						 <p class="hui">&nbsp;日产纯电动车型ARIYA艾睿雅，搭载日产e-POWER技术的奇骏以及日产JUKE混动版和搭载日产e-POWER技术的逍客均获得五星安全评级。</p>
						 
					 </div>
					 <div id="wen2">
						 <a class="nw" href="#"> <h3>
						 &nbsp;2022中国国际进口博览会							
						 </h3> </a>
						<br>
						 <br>
						 
						 <p class="hui">&nbsp;2022-11-11</p><br>
						 <br>
						 <br>
						 <p class="hui">&nbsp;日产汽车赴进博之约，以新业务、新成果展示，为中国消费者提供多元、可持续的移动出行解决方案，传递持续深耕中国市场的坚定决心。 在中国，为中国。</p>
					 </div>
					 <div id="wen3">
					 						 <a class="nw" href="#"> <h3>
					 						 &nbsp;日产汽车公布2022财年上半年财报							
					 						 </h3> </a>
					 						<br>
					 						 <br>
					 						 
					 						 <p class="hui">&nbsp;2022-11-10</p><br>
					 						 <br>
					 						 <br>
					 						 <p class="hui">&nbsp;日产汽车公司昨天公布了2022财年上半年（2022年4月1日-2022年9月30日）的财务报告，并上调了2022财年的全年收入及利润预期。</p>
					 </div>
				 </div>
			 </div>
			 
			  <div id="space3"></div>
			 <section id="footer">
			 	 <a class="zh" href="#"><p>车型介绍</p></a>
			 	 <a class="zh" href="#"><p>品牌故事</p></a>
			 	  <a class="zh" href="#"><p>价格咨询</p></a>
			 	  <a class="zh" href="#"><p>性能测试</p></a>
			 	  <a class="zh" href="#"><p>联系我们</p></a>
			 	</section>
			 	<div id="space4">
			 		<p>Copyright © CAR中国 | 京ICP备12029670号-1 京公网安备 11010502031597号 隐私政策</p>
			 		
			 	</div>
		  </div>
		 
		 
		</div>
		
		
		<script type="text/javascript">
			function showpic(obj){
				var p=document.getElementById('picpop');
				p.style.display="block";
				var i=document.getElementById('bigimg');
				i.src=obj.src;
				var t=document.getElementById('caption');
				t.innerText=obj.alt;
				
			}
			function closepic(){
				var p=document.getElementById('picpop');
				p.style.display="none";
				
			}
		</script>
	</body>
</html>
